<template>
  <div class="role-container" p-30px>
    <h2>⻆⾊管理</h2>
    <el-button type="primary" plain @click="handleAddRole">添加⻆⾊</el-button>
    <el-table :data="roles" max-height="400">
      <el-table-column prop="name" label="⻆⾊名称"> </el-table-column>
      <el-table-column
        prop="description"
        label="说
  明"
      >
      </el-table-column>
      <el-table-column
        prop="is_default"
        label="是否默认⻆⾊"
        :formatter="formatter"
      >
      </el-table-column>
      <el-table-column
        prop="createdAt"
        label="创建
时间"
      >
      </el-table-column>
      <el-table-column
        prop="updatedAt"
        label="更新
时间"
      >
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150px"
        ><template #default="scope">
          <el-button
            link
            size="small"
            @click="handleEditRole(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            link
            size="small"
            @click="handleDeleteRole(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="role-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :total="total"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, prev, pager, next,
sizes,jumper"
      ></el-pagination>
    </div>
    <right-panel v-model="panelVisible" :title="panelTitle" :size="330">
      <editor-role
        :type="editType"
        :data="editData"
        @submit="handleSumbitRole"
      />
    </right-panel>
  </div>
</template>

<script lang="ts" setup>
import { ActionRoleParams, useRoleStore } from "@/stores/role"
import { IRole } from "@/api/role"
const { proxy } = getCurrentInstance()!
const store = useRoleStore()
// ⻆⾊列表
const roles = computed(() => store.state.roles)
// 总条数
const total = computed(() => store.state.count)
// 分⻚⻚码 条数 ⻚码后端是从0开始 前端是从1开始
const pageNum = ref(0)
const pageSize = ref(10)
const panelVisible = ref(false)
const editData = ref<IRole | undefined>(undefined)
const editType = ref(1)
const panelTitle = computed(() => {
  return editType.value === 1 ? "新增⻆⾊" : "编辑⻆⾊"
})
// 获取⻆⾊列表
const getRoleList = () => {
  store.getRoles({ pageNum: pageNum.value, pageSize: pageSize.value })
}
// ⾃动追踪相关依赖属性变动获取数据
watchEffect(() => {
  getRoleList()
})
// 删除⻆⾊处理
const handleDeleteRole = async (index: number, row: IRole) => {
  try {
    await proxy?.$confirm(
      `您确认要删除⻆⾊
${row.name}吗？`,
      "删除确认",
      {
        type: "warning"
      }
    )
    await store.removeRole({
      id: row.id,
      pageSize: pageSize.value,
      pageNum: pageNum.value
    } as ActionRoleParams)
    proxy?.$message.success("⻆⾊删除成功")
  } catch {
    proxy?.$message({
      type: "info",
      message: "已取消删除"
    })
  }
}
const formatter = (row: IRole) => {
  return row.is_default ? "是" : "否"
}
// pageSize 改变
const handleSizeChange = (val: number) => {
  pageSize.value = val
}
// pageNum 改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val - 1 // ⻚码后端是从0开始的
}
// 编辑⻆⾊处理
const handleEditRole = (index: number, row: IRole) => {
  editType.value = 0
  editData.value = { ...row }
  panelVisible.value = true
}
// 添加⻆⾊处理
const handleAddRole = () => {
  editType.value = 1
  editData.value = {} as IRole
  panelVisible.value = true
}

const addNewRole = async (data: IRole) => {
  await store.addRole({
    ...data,
    pageSize: pageSize.value,
    pageNum: pageNum.value
  })
  proxy?.$message.success("⻆⾊添加成功")
  panelVisible.value = false
}

const editRole = async (data: IRole) => {
  await store.editRole({
    ...data,
    pageSize: pageSize.value,
    pageNum: pageNum.value
  } as ActionRoleParams)
  proxy?.$message.success("⻆⾊编辑成功")
  panelVisible.value = false
}

const handleSumbitRole = (data: IRole) => {
  if (editType.value === 1) {
    addNewRole(data)
  } else {
    editRole(data)
  }
}
</script>
